<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>
    	<spring:message code="head.clothGarment"></spring:message>
    	-
    	<spring:message code="fittingRoom"></spring:message>
    </title>
    <!--公共样式-->
    <link href="${pageContext.request.contextPath }/web/css/font/iconfont.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/web/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/web/css/NormalizeFile.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/web/css/public.css" />
    <!--列表页面私有样式-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/web/css/subpage/FlowerCatalog.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/web/css/subpage/details.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath }/web/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/2.1/layer.js"></script>
    <script>
var _avatarCode = "103";
var zoomplus = 0,zoomminus = 0, up = 0, down = 0 , left = 0 , right = 0,filename="";
var url="",testUrl="";
var a = 0;
var b = 0;
var c = 0;
var int=0;
function showModel(fileName) {
	 $(".top").attr("disabled","disabled");
     $(".left").attr("disabled","disabled");
     $(".right").attr("disabled","disabled");
     $(".bottom").attr("disabled","disabled");
     $(".add").attr("disabled","disabled");
     $(".subtract").attr("disabled","disabled");
	 $('#divLoading').show();
     //setTimeout("$('#divLoading').hide();",3000);  
   if(filename=="")
	{	   		
		if($("#test").val()!=undefined&&$("#test").val()!="")
		{
			filename=$("#test").val();	
		}
		
		else
		{
			 
			 /* if($("#testUrl").val()!="")
			  {
				 filename=$("#testUrl").val();
			  }
			 else
			  { */
				filename="b.JPG";
			 /*  } */
			
		}		 		
		
	}
    var a = zoomplus - zoomminus;
    var b = left - right;
    var c = up - down;
    if (a >= 0) {
        var a=1;
    }
    else{
        var a=2;
    }
    if (b >= 0) {
        var b=1;
    }
    else{
        var b=2;
    }
    if (c>=0) {
        var c=1;
    }
    else{
        var c=2;
    }
    
    var queryStringOut = _avatarCode+a+Math.abs(zoomplus-zoomminus)+b+Math.abs(left-right)+c+Math.abs(up-down)+"\\"+filename;
    var queryStringIn = _avatarCode+a+Math.abs(zoomplus-zoomminus)+b+Math.abs(left-right)+c+Math.abs(up-down)+filename.substring(0,filename.lastIndexOf('.'))+".jpg";
    $.ajax({
	  type: 'POST',
	  url:"${pageContext.request.contextPath }/web/pattern/writeTxtKuaYu",
	  data: {
	  	isrc:queryStringOut
	  },
	  success: function(){
			 var ss= clearInterval(int);
		   	 //url = '${pageContext.request.contextPath }/upload/'+queryStringIn;	
		   	 url='${imgpath }new/'+queryStringIn;
	     	 $('#imgModel').attr('onerror', "this.src='"+ $("#hiddenUrl").val()+"'");    	
	         $("#hiddenUrl").val(url); 
	         testUrl='/upload/clothPicture/syPicture/'+queryStringIn;			         
			 int =setInterval("setUrl()",1000);			
		  },
	  error: function(){
	  	layer.msg('<spring:message code="pattern.server"></spring:message>',{icon:0,time:1000});
	  }
	});
}

function setUrl()
{
    $.ajax({
  	 url:"${pageContext.request.contextPath }/web/pattern/testImgKuaYu",
  	 data: {
  		s:$("#size").val(),
  		n:$("#no").val(),
  		ImgPath:testUrl
  	  },
  	  success: function(result){       		 
  		 if(result==1)
  			{    			
  			 document.getElementById('imgModel').src=url;
  			 $('#divLoading').hide();
  			 removeD();
  			 $("#savePic").attr("href",url);
  			 var ss= clearInterval(int);
  		    }      	   	
  	  },
  	  error: function(){
  	  	//alert("服务器未响应");
  	    //layer.msg('<spring:message code="pattern.server"></spring:message>',{icon:0,time:1000});
  	  }
    }); 
} 
 
 function removeD()
 {
	 $(".top").removeAttr("disabled");
     $(".left").removeAttr("disabled");
     $(".right").removeAttr("disabled");
     $(".bottom").removeAttr("disabled");
     $(".add").removeAttr("disabled");
     $(".subtract").removeAttr("disabled");
 }

function Up() {
    up++;
    showModel();
}

function Down() {
    down++;
    showModel();
}

function Left() {
    left++;
    showModel();
}

function Right() {
    right++;
    showModel();
}

function zoomPlus() {
    zoomplus++;
    showModel();
}

function zoomMinus() {
    zoomminus++;
    showModel();
}
function changeAvatar(avatarCode) {
    _avatarCode = String(parseInt(avatarCode) + parseInt(100));
    showModel();
}

function changeFileName(fileName) {	
	filename=fileName.replace(/(^\s*)|(\s*$)/g, ""); 
    showModel();
}
$(function () {
    showModel();
    var _top = 0;
    var _left = 0
    $(".top").click(function () {    
        _top -= 10;
        var _position = _left + "px " + _top + "px";
        Up();
    });
    $(".bottom").click(function () {
        _top += 10;
        var _position = _left + "px " + _top + "px";
        Down();
       // $(".content .model").css({ "background-position": _position });
    });
    $(".left").click(function () {
        _left -= 10;
        var _position = _left + "px " + _top + "px";
        Left();
      //  $(".content .model").css({ "background-position": _position });
    });
    $(".right").click(function () {
        _left += 10;
        var _position = _left + "px " + _top + "px";
        Right();
       // $(".content .model").css({ "background-position": _position });
    });
    var _num_as = 100;
    var _add = _num_as;
    $(".add").click(function () {
        _add = _num_as;
        _add += 10;
        if (_add >= 200) {
            _add = 200;
        }
        var _backsize = _add + "px " + "auto";
            $(".percent").text(_add + "%");
        _num_as = _add;
        zoomPlus();
    });
    
    var _subtract = "";
    $(".subtract").click(function () {
        _subtract = _num_as;
        _num_as -= 10;
        if (_subtract <= 50) {
            _num_as = 50;
        }
        var _backsize = _num_as + "px " + "auto";
        $(".percent").text(_num_as + "%");
        zoomMinus();

});
});
</script>
</head>
<body class="mt134" style="background:#dddddd;">
	<jsp:include page="../main/head.jsp"></jsp:include>	
    <!--花型目录 begin-->
    <div class="contenter mar-t40 font1 bor1 mar-t30" style="width:1249px;">
        <div class="catalog-left f-l">
        	<div class="eye eye-open">
            	<img src="${pageContext.request.contextPath }/web/img/eye-open.jpg">
            	<span><spring:message code="pattern.guanbixuanran"></spring:message></span>
        	</div>
        	<div class="eye eye-close hide">
            	<img src="${pageContext.request.contextPath }/web/img/eye-close.jpg">
            	<span><spring:message code="pattern.kaiqixuanran"></spring:message></span>
        	</div>
        </div>
         <div id="divLoading" style="position:absolute;top:50%;left:41%;z-index:999;">
		<img src="${pageContext.request.contextPath }/web/img/loading.gif" />
        </div>       
        <div class="catalog-center f-l" style="overflow-y:hidden;width:590px;overflow:hidden;height:1133px;">
            <div class="menu">
                <ul>
                    <li class="item-model replacement-model-btn"><a id="savePic" href="${pageContext.request.contextPath }/web/img/flower-pic.jpg'"; download="yongrongfang"><span><spring:message code="pattern.baocun"></spring:message></span></a></li>                 
                    <li class="item-pattern replacement-flower-type-btn"><span><spring:message code="pattern.shangchuanhuaxing"></spring:message></span><input type="file" name="file" id="file" onchange="fileUpload();"></li>
                    <li class="item-save"><span><spring:message code="pattern.fenxiang"></spring:message></span></li>                    
                    <!-- JiaThis Button BEGIN -->
                    <div onmouseover="setShare('', '/web/main/index');">
						<div class="jiathis_style_32x32 hide">
							<a class="jiathis_button_tsina"></a>
							<a class="jiathis_button_weixin"></a>
							<a class="jiathis_button_cqq"></a>
						</div>
					</div>
					<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
					
					<!-- JiaThis Button END -->
                 </ul>
             </div>
             <input type="hidden" id="size" value="${pattern.chicun}"> 
             <input type="hidden" id="no" value="${pattern.pNo}"> 
             <input type="hidden" id="test" value="${pattern.pImg}"> 
             <input type="hidden" id="hiddenUrl" value="${pageContext.request.contextPath }/web/img/flower-pic.jpg">
            <img id="imgModel" class="model" onerror="this.src='${pageContext.request.contextPath }/web/img/flower-pic.jpg' "src="${pageContext.request.contextPath }/web/img/flower-pic.jpg" />
            <c:if test="${not empty pattern  }">
            	<img id="flowercatalog" class="flowercatalog hide" src="${pageContext.request.contextPath }/upload/waterMark/${pattern.pImg}" style="width:auto;" />
            </c:if>
            <c:if test="${empty pattern  }">
            	<img id="imgDefaultModel" class="model hide" onerror="this.src='${pageContext.request.contextPath }/web/img/screening-condition_04.png' "src="${pageContext.request.contextPath }/web/img/screening-condition_04.png" />
            </c:if>
            
            <div class="direction">
                <button class="top"><i class="icon Hui-iconfont">&#xe6d6;</i></button>
                <button class="left"><i class="icon Hui-iconfont">&#xe6d4;</i></button>
                <button class="right"><i class="icon Hui-iconfont">&#xe6d7;</i></button>
                <div class="clr"></div>
                <button class="bottom"><i class="icon Hui-iconfont">&#xe6d5;</i></button>
                <button class="add"><i class="icon Hui-iconfont">&#xe600;</i></button>
                <button class="subtract"><i class="icon Hui-iconfont">&#xe6a1;</i></button>
                <div class="percent">100%</div>
            </div>
        </div>
        <div class="catalog-right f-r">
        <c:if test="${pattern.pId!=null }">
        <div class="tab-sel">
            <jsp:include page="flowerCatalogUp.jsp"></jsp:include>
			<jsp:include page="flowerCatalogDown.jsp"></jsp:include>
		</div>
		</c:if>
        </div>
        <div class="clr"></div>
    </div>
    <input type="hidden" id="hiddenFileName" value=""/>
    <!--花型目录 end-->
	<jsp:include page="../main/bottom.jsp"></jsp:include>
    <!--全局-->

    <script type="text/javascript" src="${pageContext.request.contextPath }/web/js/public.js"></script>
    <!--ie789下placeholder不兼容-->
    <script type="text/javascript" src="${pageContext.request.contextPath }/web/js/placeholder.js"></script>
    <!--头部的以图搜图-->
    <%-- <script type="text/javascript" src="${pageContext.request.contextPath }/web/js/uppicFile.js"></script> --%>
    
    
    <script type="text/javascript" src="${pageContext.request.contextPath }/web/js/ajaxfileupload.js"></script>
    
    <script>
    	//分享
    	$(".item-save,.jiathis_style_32x32").click(function(){
    		$(".jiathis_style_32x32").toggleClass("hide");
    	});
    
        function fileUpload()
        {
        	$.ajaxFileUpload({
    	        url: '${pageContext.request.contextPath}/upload/uploadNew', //用于文件上传的服务器端请求地址
    	        type: 'post',
    	        secureuri: false, //一般设置为false
    	        fileElementId: "file", //文件上传空间的id属性  <input type="file" id="file" name="file" />
    	        dataType: 'text', //返回值类型 一般设置为json
    	        success: function (data, status)  //服务器成功响应处理函数
    	        {	    	        	
    	        	//$("#hiddenFileName").val(data);
    	        	changeFileName(data.split(",")[0].split("/")[3]);
    	        	//$("#flowercatalog").attr("src","${pageContext.request.contextPath }/upload/"+data);
    	            //$(".catalog-left").click();
            	}
    	    });
        }
    
    	/*眼睛眨啊眨--渲染、关闭渲染*/
    	$(".catalog-left").click(function(){
    		if($(".catalog-left>div").eq(0).hasClass("hide") == true){    	
    			$(".catalog-center img.model").removeClass("hide");
    			$(".catalog-center img.flowercatalog").addClass("hide");
    			$(".direction").removeClass("hide");
    			$(".menu").removeClass("hide");
    			$(".catalog-left>div").eq(0).removeClass("hide");
    			$(".catalog-left>div").eq(1).addClass("hide"); 
    			$("#imgDefaultModel").addClass("hide");
    			
    		}else{
    			$(".catalog-center img.model").addClass("hide");
    			$(".catalog-center img.flowercatalog").removeClass("hide");
    			$(".direction").addClass("hide");
    			$(".menu").addClass("hide");
    			$(".catalog-left>div").eq(1).removeClass("hide");
    			$(".catalog-left>div").eq(0).addClass("hide");
    			$('#divLoading').hide();
    			$("#imgDefaultModel").removeClass("hide");
    		}
    	});
    	
        /*选服装类型*/
        $(".tab  ul.cate-li li").click(function () {
            $(".tab  ul.cate-li li").eq($(this).index()).addClass("on-cate").siblings().removeClass('on-cate');
        });

    </script>
<!--单页面使用多分享按钮需要增加的分享参数代码-->                        
<script type="text/javascript">
  function setShare(title, url) {
	//获取当前网址，如： http://localhost:8080/Tmall/index.jsp
	  var curWwwPath=window.document.location.href;

	  //获取主机地址之后的目录如：/Tmall/index.jsp
	  var pathName=window.document.location.pathname;
	  var pos=curWwwPath.indexOf(pathName);

	  //获取主机地址，如： http://localhost:8080
	  var localhostPaht=curWwwPath.substring(0,pos); 
      jiathis_config.title = title;
      jiathis_config.url = localhostPaht+"/bdyz"+url;
  }
    var jiathis_config = {}
  </script>   
<!--分享参数代码结束-->
<!--分享功能代码统一放到页尾-->
<script type="text/javascript" src="http://v1.jiathis.com/code/jia.js?uid=2091511" charset="utf-8"></script>
</body>
</html>